<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:Product</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称:{{ item.title }}
                </b>
                --------
                <b>
                    价格: {{ item.price }}
                </b>
                --------
                <b>
                    库存:{{ item.inventory }}
                </b>
                <button :disabled="item.inventory === 0" @click="addCart(item)">+加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
//需求:

//1.请求服务器,在product组件里面渲染数据

// - 封装请求的方法

// - 请求放到vuex的action里面

// - vuex需要模块化,并且添加mutation

//2.点击产品后面的按钮,需要将产品添加到购物车

//3.相同的数据添加到购物车之后,需要让购物车的数量加1 产品的库存-1

//4.总价计算
import { mapActions, mapState } from "vuex"
//引入axios 
import axios from "axios"
export default {
    methods: {
        addCart(current) {
            //current 点击按钮选中的这条数据
            console.log(current)
            this.ADD_CART(current)
        },
        ...mapActions('product', ['FETCH_PRODUCT']),
        ...mapActions('cart', ['ADD_CART'])
    },
    computed: {
        ...mapState('product', ['productData'])
    },
    mounted() {
        this.FETCH_PRODUCT()
    },
    created() {
        //发送一个get请求
        axios.get("/api/data/index.json", {
            //get请求的配置
            //请求头
            headers: {},
            //传递的参数
            params: {
                name: "lilei"
            }
        })
            .then(res => {
                console.log(res)
            })



        //发送一个post请求

        //语法:axios.post('地址',{传递的参数},{请求的配置})

        // axios.post("/api/users/login", {
        //     //传递的数据
        //     username: "lbw",
        //     password: "555"
        // }, {
        //     //配置
        //     headers: {
        //         nickname: "jntm"
        //     }
        // })
        //     .then(res => {
        //         console.log(res)
        //     })

        //配置模式config

        // axios({
        //     url:"/api/users/login",//请求地址
        //     method: "post",//请求方式
        //     //params:{},//get请求的传参字段
        //     data: {
        //         username: 'admin',
        //         password: 'admin'
        //     },//post请求的传参字段
        //     //headers: {},//设置请求头
        //     timeout: 3000,//超时设置,请求3秒没有响应,直接进入catch
        //     withCredentials: true //携带凭据(cookie)
        // })
        // .then(res=>{
        //     console.log(res)
        // })

    }
}
</script>